<template>
  <van-search
    shape="round"
    v-model="value"
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    class="custom-search"
  />
  <home-swiper></home-swiper>
  <home-grid></home-grid>
  <home-product></home-product>
  <home-new></home-new>
  <home-top></home-top>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import HomeSwiper from '../components/HomeSwiper.vue'
import HomeGrid from '../components/HomeGrid.vue'
import HomeProduct from '../components/HomeProduct.vue'
import HomeNew from '../components/HomeNew.vue'
import HomeTop from '../components/HomeTop.vue'

const value = ref('')
const onSearch = val => showToast(val)
const onCancel = () => showToast('取消')
</script>

<style lang="less" scoped>
.custom-search {
  background-color: #f8f8f8; /* 背景色 */
  padding: 10px; /* 内边距 */
  border-radius: 20px; /* 圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin: 10px; /* 外边距 */

  .van-search__content {
    background-color: #ffffff; /* 搜索框内部背景色 */
    border: 1px solid #e0e0e0; /* 边框 */
    border-radius: 20px; /* 圆角 */
  }

  .van-field__control {
    color: #333333; /* 输入文字颜色 */
  }

  .van-icon-search {
    color: #999999; /* 搜索图标颜色 */
  }

  .van-search__action {
    color: #ff6700; /* 取消按钮颜色 */
  }
}
</style>